<template>
    <div class="xmks-card">
        <div class="xmks-card__head">
            <span v-if="preTxt" class="xmks-card__pre-txt">{{ preTxt }}</span>
            <span class="xmks-card__head">{{ title }}</span>
            <div v-if="tagName" class="xmks-card__tag">
                <span>{{ tagName }}</span>
            </div>
        </div>
        <div class="xmks-card__main">
            <slot></slot>
        </div>
        <div v-if="btns?.length" class="xmks-card__foot">
            <span v-for="(btn, index) in btns" :key="index" :data-name="btn.name" class="xmks-card__btn"
                @click="btn.event">
                <i :class="`iconfont ${btn.icon} `"></i>
            </span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { CardBtn } from '@/ts/common/card-btn'

/************************变量定义相关***********************/
withDefaults(
    defineProps<{
        preTxt?: string; //前缀文本
        title: string; //标题文本
        tagName?: string; //标签名称
        btns?: CardBtn[];// 按钮组
    }>(),
    {
        preTxt: "",
        tagName: "",
    }
);
</script>

<style lang="scss" scoped>
.xmks-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 385px;
    min-height: 220px;
    padding: 24px 20px 20px 20px;
    background: #ffffff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: var(--transition);

    &:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .xmks-card__head {
        display: flex;
        justify-content: center;
        align-items: center;

        .xmks-card__pre-txt {
            display: inline-block;
            width: 24px;
            height: 20px;
            line-height: 20px;
            border-radius: var(--radius-sm);
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: #ffffff;
            margin-right: 8px;
            background: var(--color-primary);
        }

        .xmks-card__head {
            display: inline-block;
            max-width: 240px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 17px;
            font-weight: 600;
            color: var(--color-gray-900);
        }

        .xmks-card__tag {
            display: inline-block;
            margin-left: 8px;
            padding: 2px 10px;
            font-size: 13px;
            font-weight: 500;
            border: 1px solid var(--color-primary);
            border-radius: var(--radius-sm);
            background-color: var(--color-primary-bg);
            color: var(--color-primary);
        }
    }

    .xmks-card__main {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    &:hover {
        .xmks-card__foot {
            height: 58px;
            overflow: initial;
            // border-top: 1px solid #E5E5E5;
        }
    }

    .xmks-card__foot {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        height: 0;
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
        transition: height 0.2s ease;
        overflow: hidden;
        border-top: 1px solid var(--color-gray-200);

        .xmks-card__btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin: 0 8px;
            border-radius: 50%;
            border: 1px solid var(--color-gray-300);
            color: var(--color-gray-600);
            background-color: #FFFFFF;
            position: relative;
            cursor: pointer;
            transition: var(--transition);
            z-index: 1;

            &::before {
                content: "";
                display: block;
                position: absolute;
                bottom: -10px;
                left: 50%;
                transform: translateX(-50%);
                border-width: 0 5px 8px 5px;
                border-style: solid;
                border-color: transparent transparent var(--color-primary);
                opacity: 0;
                transition: var(--transition);
            }

            &::after {
                content: attr(data-name);
                display: block;
                position: absolute;
                bottom: -42px;
                transform: translateX(-50%);
                left: 50%;
                height: 32px;
                padding: 0 12px;
                white-space: nowrap;
                line-height: 32px;
                background-color: var(--color-primary);
                color: white;
                border-radius: var(--radius-md);
                font-size: 13px;
                font-weight: 500;
                opacity: 0;
                transition: var(--transition);
                box-shadow: var(--shadow-md);
            }

            &:hover {
                border-color: var(--color-primary);
                background-color: var(--color-primary);
                color: white;
                transform: translateY(-2px);

                &::before,
                &::after {
                    opacity: 1;
                }
            }
        }
    }
}
</style>
